<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="demoTable">
                搜索商户：
                <div class="layui-inline">
                    <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑
                </a>

                <#--<button data-method="notice" class="layui-btn layui-btn-xs" >公告</button>-->
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

        </div>
        <div class="layui-tab-item">内容2</div>
    </div>
    <input id="handle_status" hidden="hidden">
</div>

<script src="/static/layui/layui.all.js" charset="utf-8"></script>
<script src="/static/jquery.min.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function(){
        var element = layui.element;

    });
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.jquery;
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/student/all'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', width: 180, sort: true, fixed: true}
                , {field: 'name', title: '姓名', width: 100, sort: true}
                , {field: 'gender', title: '性别', width: 80, sort: true, edit: true}
                , {field: 'age', title: '年龄', width: 80}
                , {field: 'grade', title: '年级', width: 120}
                , {field: 'score', title: '分数', width: 100}
                , {field: 'mobile', title: '联系方式', width: 150}
                , {field: 'right', title: '操作', toolbar: "#barDemo"}
            ]]
            , id: 'testReload'
            , page: true
            , height: 315
            , width: 1100
            , limits: [10, 20, 50, 100]
            , limit: 10
        });

        //监听表格复选框选择
        table.on('checkbox(user)', function (obj) {
            console.log(obj)
        });

        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // layer.msg('编辑行：<br>'+ JSON.stringify(data))
                layer.open({
                    title: "改一下吧",
                    type: 2,
                    shadeClose: true,
                    shade: 0.8,
                    area: ['670px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/student/edit/' + data.id,
                    success: function (layero, index) {
                    },
                    end: function () {
                        layer.msg('添加成功！', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            history.go(0);
                        });

                    }
                });
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }

        };

    });
</script>

</body>
</html>